<template>
  <div>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <el-row>
        <el-col :span="24">
          <ul>
            <li v-for="(items, i) in dataList" :key="i" class="tips-list-item">
              <span
                ><span @click="toPage(items)" class="label-color">{{
                  getLabel(items)
                }}</span
                >：共有<span class="length-color"> {{ items.length }} </span
                >条待处理数据</span
              >
            </li>
          </ul>
        </el-col>
      </el-row>
    </page-dialog>
  </div>
</template>
<script setup>
import PageDialog from '../PageDialog/index'
import jsobList from '@/common/tipsJsonList.js'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array,
    default: function () {
      return []
    },
  },
})
const emits = defineEmits()
const dataList = ref()
const dialogInfo = reactive({
  title: '待处理事件',
  btLoading: false,
  width: '600px',
  btList: [{ label: '关闭', event: handleClose, show: true }],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(val) {
    emit('update:showDialog', val)
  },
})
onMounted(() => {
  if (props.list.length) {
    dataList.value = _.groupBy(props.list, 'type')
  }
})
const getLabel = (arr) => {
  let label = jsobList[arr[0].type].label
  return label
}
const toPage = (arr) => {
  let name = ''
  let routes = proxy.$store.state.permission.routes
  routes.map((item) => {
    if (item.children && item.children.length) {
      item.children.map((i) => {
        if (i.code === jsobList[arr[0].type].router) {
          name = jsobList[arr[0].type].router
        }
      })
    }
  })
  if (name) {
    proxy.$router.push({
      name: name,
      params: {
        tipsOrderId: arr[0].orderId,
      },
    })
    handleClose()
  } else {
    proxy.$message({
      duration: 3500,
      type: 'warning',
      showClose: true,
      message: '你没有相应的菜单权限',
    })
  }
}
const handleClose = () => {
  shows.value = false
  emits('reset')
}
</script>
<style scoped lang="scss">
.el-dialog__body {
  height: 355px;
  display: flex;
  flex-direction: column;
}
.length-color {
  color: #f56c6c;
}
.label-color {
  color: #4dc4a1;
  cursor: pointer;
}
.tips-list-item {
  padding-bottom: 5px;
}
</style>
